import { reactive, ref } from "vue";
import { request } from "@/views/table/fragment/http";
import type { EditMode, SubmitConfig } from "@/views/table/types";
import { Message } from "@arco-design/web-vue";

interface GetTableConfig {
  baseUrl: string;
  url: string;
  query: {
    [k in string]: any;
  };
  callback: (res: any) => void | undefined;
}
interface SlotRow {
  column: any;
  record: {
    [k in string]: any;
  };
}
interface InsideState {
  query: {
    [k in string]: any;
  };
  page: {
    size: number;
    current: number;
    total: number;
  };
  create: {
    [k in string]: any;
  };
  update: {
    [k in string]: any;
  };
  detail: {
    [k in string]: any;
  };
  currMode: EditMode;
  visible: boolean;
  columns: any [];
  slots: {
    [k in string]: any;
  };
}
export function useTable() {
  const st: InsideState = reactive({
    query: {},
    page: {
      size: 10,
      current: 1,
      total: 0,
    },
    create: {},
    update: {},
    detail: {},
    currMode: "create",
    visible: false,
    columns: [],
    slots: {},
  });
  const modeObj = reactive({
    create: {},
    update: {},
    detail: {},
  });
  const tableData = ref([]);
  const formRef = ref(null);
  const visible = ref(false);
  const resetSearch = (callback: () => void | undefined) => {
    Object.keys(st.query).forEach((key) => {
      // @ts-ignore
      st.query[key] = "";
    });
    st.page.current = 1;
    st.page.total = 0;
    if (callback && typeof callback === "function") {
      callback();
    }
  };
  /**
   * 获取分页数据
   * @param baseUrl
   * @param url
   * @param query
   * @param callback
   */
  const getTableData = ({ baseUrl, url, query, callback }: GetTableConfig) => {
    // query.current = st.page.current;
    // query.size = st.page.size;
    request({
      baseUrl,
      url,
      query: { ...{ size: st.page.size, current: st.page.current }, ...query },
    }).then((res) => {
      callback(res);
    });
  };
  /**
   * 删除数据
   * @param record
   * @param column
   * @param config
   */
  const deleteTableData = (
    { record, column }: SlotRow,
    config: SubmitConfig
  ) => {
    const id = record.id;
    const { api, baseUrl, callback } = config;
    if (!id) return false;
    request({ baseUrl, url: api + `/${id}`, method: "DELETE" }).then((res) => {
      if (res.code === 200) {
        Message.success("删除成功");
        callback();
      } else {
        Message.error("删除失败");
      }
    });
  };
  /**
   * 新增表格数据
   * @param data
   * @param config
   */
  const createTableData = (data: any, config: SubmitConfig) => {
    const { api, baseUrl, callback, visible } = config;
    request({ baseUrl, url: api, method: "POST", body: data }).then((res) => {
      if (res.code === 200) {
        Message.success("新增成功");
        callback();
        visible.value = false;
      } else {
        Message.error("新增失败");
      }
    });
  };
  /**
   * 修改表格数据
   * @param data
   * @param config
   */
  const updateTableData = (data: any, config: SubmitConfig) => {
    const id = data.id;
    const { api, baseUrl, callback } = config;
    if (!id) return false;
    request({ baseUrl, url: api + `/${id}`, method: "PATCH", body: data }).then(
      (res) => {
        if (res.code === 200) {
          Message.success("修改成功");
          callback();
          visible.value = false;
        } else {
          Message.error("修改失败");
        }
      }
    );
  };
  /**
   * 获取表格详情
   * @param row
   * @param config
   */
  const getTableDataDetail = (row: SlotRow, config: SubmitConfig) => {
    const id = row.record.id;
    const { api, baseUrl, callback } = config;
    if (!id) return false;
    request({ baseUrl, url: api + `/${id}`, method: "GET" }).then((res) => {
      if (res.code === 200) {
        st[st.currMode] = res.data;
        Object.assign(modeObj[st.currMode], res.data);
        callback();
      }
    });
  };
  return {
    st,
    visible,
    getTableData,
    resetSearch,
    deleteTableData,
    getTableDataDetail,
    updateTableData,
    tableData,
    formRef,
    modeObj,
    createTableData,
  };
}
